<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
    <title>书籍分类统计</title>
    <meta name="decorator" content="blank"/>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, maximum-scale=1.0"/>
    <meta content="telephone=no,email=no" name="format-detection"/>
    <script src="${ctxStatic}/chart/Chart.min.js" type="text/javascript"></script>
</head>
<body>
<div align="center">
    <canvas id="canvas" height="300" width="600"></canvas>
</div>

<script type="text/javascript">
    var barChartData;
    //设置图形需要显示的数据
    function getSvSchoolInfo() {
        try {
            $.getJSON("${ctx}/svschoolinfo/getSvSchoolInfo", function (data) {
                barChartData = {
                    labels: ["总馆藏数量","",
                        "借出图书总数","",
                        "读者总数",""],
                    datasets: [
                        {
                            fillColor: "rgba(151,187,205,0.5)",
                            strokeColor: "rgba(151,187,205,0.8)",
                            highlightFill: "rgba(151,187,205,0.75)",
                            highlightStroke: "rgba(151,187,205,1)",
                            data: [data['totalBooks'],"",
                                data['borrowedBooks'],"",
                                data['totalReaders'],""]
                        }
                    ]
                };
                var ctx = document.getElementById("canvas").getContext("2d");
                window.myBar = new Chart(ctx).Bar(barChartData, {
                    responsive: true
                });

            });
        } catch (e) {
            alert(e)
        }
    }
    window.onload = function () {
        getSvSchoolInfo();

        /*var ctx = document.getElementById("canvas").getContext("2d");
         window.myBar = new Chart(ctx).Bar(barChartData, {
         responsive: true
         });*/
    }

</script>
</body>
</html>